<template>
    <div class="product-detail"></div>
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
          <span>首页</span>
          <i class="iconfont icon-arrow-right"></i>
          <span>二手产品</span>
          <i class="iconfont icon-arrow-right"></i>
          <span>{{goodsName}}</span>
        </div>
    
        <div class="detail-container">
          <!-- 左侧图片展示区 -->
          <div class="product-gallery">
            <div class="main-image-wrapper">
              <img :src="currentImage" alt="商品主图" class="main-image">
              <div class="image-overlay">
              
              </div>
            </div>
            
          </div>
    
          <!-- 右侧商品信息 -->
          <div class="product-info">
            <div class="product-header">
              <div class="tags">
                <span class="tag quality">9成新</span>
                <span class="tag authentic">已验证</span>
              </div>
              <h1 class="title">{{introduct}}</h1>
    
            </div>
    
            <div class="price-section">
              <div class="price-row">
                <span class="label">转售价</span>
                <span class="current-price">¥{{price}}</span>
                <span class="discount">4.8折</span>
              </div>
              <div class="price-tips">
                <i class="iconfont icon-info"></i>
                该商品支持验货交易，确认无误后再付款
              </div>
            </div>
    
            <div class="detail-section">
              <div class="detail-row">
                <span class="label">商品成色</span>
                <div class="value">
                  <div class="condition-bar">
                    <div class="condition-progress" style="width: 90%"></div>
                  </div>
                  <span class="condition-text">9成新</span>
                </div>
              </div>
              <div class="detail-row">
                <span class="label">购买日期</span>
                <span class="value">2023年8月购入（发票证明）</span>
              </div>
              <div class="detail-row">
                <span class="label">商品编号</span>
                <span class="value">SN78955663</span>
              </div>
              <div class="detail-row">
                <span class="label">浏览次数</span>
                <span class="value">1,234次</span>
              </div>
            </div>
    
            <div class="seller-section">
              <div class="seller-info">
                <img src="../assets/avatar.jpg" alt="卖家头像" class="seller-avatar">
                <div class="seller-detail">
                  <div class="seller-name">
                    李同学
                    <span class="seller-badge">信誉优秀</span>
                  </div>
                  <div class="seller-school">厦门大学 · 计算机系</div>
                </div>
                <div class="seller-stats">
                  <div class="stat-item">
                    <span class="num">98%</span>
                    <span class="text">好评率</span>
                  </div>
                  <div class="stat-item">
                    <span class="num">45</span>
                    <span class="text">成功交易</span>
                  </div>
                </div>
              </div>
            </div>
    
            <div class="action-section">
           
          <button class="btn secondary" @click="DhandleCollect">
            <i class="iconfont icon-favorite"></i>
            取消收藏
          </button>
             
            </div>
          </div>
        </div>
    
        <!-- 商品详情区域 -->
        <!-- 修改 template 中的标签页部分 -->
        <div class="product-detail-tabs">
          <div class="tab-header">
            <div 
              v-for="(tab, index) in tabs" 
              :key="index"
              class="tab"
              :class="{ active: currentTab === index }"
              @click="currentTab = index"
            >
              {{ tab.name }}
            </div>
          </div>
          
          <div class="tab-content">
         
        
            <!-- 交易须知 tab -->
            <div v-if="currentTab === 1" class="notice-content">
              <div class="notice-section">
                <h3>交易流程</h3>
                <div class="process-steps">
                  <div class="step">
                    <div class="step-icon">1</div>
                    <div class="step-info">
                      <h4>联系卖家</h4>
                      <p>与卖家沟通商品细节和交易方式</p>
                    </div>
                  </div>
                  <div class="step">
                    <div class="step-icon">2</div>
                    <div class="step-info">
                      <h4>线下验货</h4>
                      <p>约定时间地点，当面查验商品</p>
                    </div>
                  </div>
                  <div class="step">
                    <div class="step-icon">3</div>
                    <div class="step-info">
                      <h4>支付交易</h4>
                      <p>确认无误后，通过平台进行支付</p>
                    </div>
                  </div>
                </div>
              </div>
        
              <div class="notice-section">
                <h3>交易保障</h3>
                <div class="guarantee-list">
                  <div class="guarantee-item">
                    <i class="iconfont icon-shield"></i>
                    <h4>假一赔三</h4>
                    <p>若商品为假冒伪劣，可获得三倍赔偿</p>
                  </div>
                  <div class="guarantee-item">
                    <i class="iconfont icon-time"></i>
                    <h4>7天保障</h4>
                    <p>交易完成后7天内发现问题可申请退款</p>
                  </div>
                  <div class="guarantee-item">
                    <i class="iconfont icon-service"></i>
                    <h4>客服支持</h4>
                    <p>交易过程中遇到问题可随时联系客服</p>
                  </div>
                </div>
              </div>
            </div>
        
            <!-- 买家评价 tab -->
            <div v-if="currentTab === 2" class="reviews-content">
              <div class="reviews-header">
                <div class="rating-overview">
                  <div class="rating-score">4.8<span class="max-score">/5</span></div>
                  <div class="rating-stars">★★★★★</div>
                  <div class="rating-count">共12条评价</div>
                </div>
                <div class="rating-tags">
                  <span class="tag active">全部(12)</span>
                  <span class="tag">好评(10)</span>
                  <span class="tag">中评(1)</span>
                  <span class="tag">差评(1)</span>
                </div>
              </div>
        <!-- 新增评论输入表单 -->
      <div class="review-form">
        <ElForm 
          :model="commentForm" 
          :rules="commentRules" 
          ref="commentFormRef"
          class="comment-form"
        >
          <ElFormItem label="发表评论" prop="content">
            <ElInput 
              type="textarea" 
              v-model="commentForm.content" 
              rows="3" 
              placeholder="请输入您的评价..."
            ></ElInput>
          </ElFormItem>
          
          <ElFormItem>
            <ElButton 
              type="primary" 
              @click="handleCommentSubmit"
              :disabled="!commentForm.content"
            >
              提交评论
            </ElButton>
          </ElFormItem>
        </ElForm>
      </div>
              <div class="reviews-list">
                <div class="review-item">
                  <div class="reviewer-info">
                    <img src="../assets/avatar.jpg" alt="评价人头像" class="reviewer-avatar">
                    <span class="reviewer-name">王同学</span>
                    <div class="review-stars">★★★★★</div>
                  </div>
                  <div class="review-content">
                    <p class="review-text">商品完全符合描述，成色很新，卖家人很好，当面交易很顺利。</p>
                    <div class="review-images">
                      <img src="https://via.placeholder.com/100x100" alt="评价图片">
                      <img src="https://via.placeholder.com/100x100" alt="评价图片">
                    </div>
                    <div class="review-meta">
                      <span class="review-time">2024-01-15</span>
                      <span class="review-type">9成新 / 当面交易</span>
                    </div>
                  </div>
                </div>
        
                <div class="review-item">
                  <div class="reviewer-info">
                    <img src="../assets/avatar.jpg" alt="评价人头像" class="reviewer-avatar">
                    <span class="reviewer-name">张同学</span>
                    <div class="review-stars">★★★★☆</div>
                  </div>
                  <div class="review-content">
                    <p class="review-text">电脑整体不错，就是电池续航稍微差了点，其他都挺满意的。</p>
                    <div class="review-meta">
                      <span class="review-time">2024-01-10</span>
                      <span class="review-type">9成新 / 当面交易</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        </template>
        
        <script setup>
        // 引入 Element Plus 组件
    import { ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElMessage , ElMessageBox, ElCarousel, ElCarouselItem } from 'element-plus';
    import { useRouter } from "vue-router";
    import { getUsers } from "../api/user";
    import { getCurrentInstance } from 'vue'
        const goodsId = ref(''); // 组件级响应式变量
        import { getGoods } from '../api/good';
        import { ref,onMounted } from 'vue'
        const introduct = ref(''); // 商品介绍
        const goodsName = ref(''); // 商品名称
        const coverImage = ref(''); // 封面图片
        const price = ref(''); // 价格
    
        const currentImage = ref('')
        const router = useRouter()
       onMounted(() => {
    goodsId.value =localStorage.getItem("goodsId")
    const  token =localStorage.getItem("accessToken")
    if(!token){
        alert("请先登录")
       router.push("/")
      }else{
        getGoodsa(); // 页面加载时获取商品数据
      }
    
      
    });
    // 添加评论数据
        const reviews = [
        {
        id: 1,
        user: {
        name: '王同学',
        avatar: '../assets/avatar.jpg'
        },
        rating: 5,
        content: '商品完全符合描述，成色很新，卖家人很好，当面交易很顺利。',
        images: [
        'https://via.placeholder.com/100x100',
        'https://via.placeholder.com/100x100'
        ],
        time: '2024-01-15',
        type: '9成新 / 当面交易'
        },
        {
        id: 2,
        user: {
        name: '张同学',
        avatar: '../assets/avatar.jpg'
        },
        rating: 4,
        content: '电脑整体不错，就是电池续航稍微差了点，其他都挺满意的。',
        images: [],
        time: '2024-01-10',
        type: '9成新 / 当面交易'
        },
        {
        id: 3,
        user: {
        name: '李同学',
        avatar: '../assets/avatar.jpg'
        },
        rating: 5,
        content: '卖家很专业，电脑各项性能都测试过了，很满意的一次交易。',
        images: [
        'https://tse1-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo?w=292&h=182&c=7&r=0&o=5&dpr=1.4&pid=1.7'
        ],
        time: '2024-01-08',
        type: '9成新 / 当面交易'
        }
        ]
    const commentForm = ref({
      content: ''
    })
    
    const commentRules = ref({
      content: [{ required: true, message: '请输入评论内容', trigger: 'blur' }]
    })
    

    // 收藏商品点击处理方法
const DhandleCollect = async () => {
  try {
    // 显示确认对话框
    await ElMessageBox.confirm(
      '确定要取消该商品的收藏吗？', 
      '取消收藏', 
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }
    );
    
    // 用户确认后，执行收藏逻辑
    console.log('用户确认收藏，准备执行收藏操作');
    
    // 从本地获取用户ID（假设已登录）
    const accessToken = localStorage.getItem('accessToken');
    const userId = localStorage.getItem('userId');
    const goodsId = localStorage.getItem('goodsId');
    if (!accessToken) {
      ElMessage.error('请先登录');
      router.push('/');
      return;
    }
    
    // 调用API进行收藏操作，假设存在 collectGoodsApi 方法
    const response = await getGoods.DeleteCollectGoodsApi({
      goodsId: Number(goodsId),
      userId: Number(userId)
    });
    
    // 处理收藏结果

      ElMessage.success('成功取消收藏');
      router.push('/product');
  } catch (error) {
    // 处理取消或错误
    if (error instanceof Error) {
      console.log('用户取消收藏');
    } else {
      console.error('收藏过程中发生错误:', error);
      ElMessage.error('收藏失败，请重试');
    }
  }
};


    const handleCommentSubmit = async () => {
      // 表单验证
      await validateCommentForm()
      
      // 检查用户登录状态
      const accessToken = localStorage.getItem('accessToken')
      if (!accessToken) {
        ElMessage.error('请先登录后再评论')
        return router.push('/login')
      }
    
      try {
        // 模拟评论提交API（实际需替换为真实接口）
        const newComment = {
          id: Date.now(),
          user: {
            name: localStorage.getItem('userName') || '匿名用户',
            avatar: '../assets/avatar.jpg' // 可替换为用户真实头像
          },
          rating: 5, // 可添加评分功能后修改
          content: commentForm.value.content,
          images: [],
          time: new Date().toISOString().split('T')[0],
          type: `${goodsName.value} / 系统自动评价`
        }
    
        // 添加到评论列表顶部
        reviews.value.unshift(newComment)
        
        // 清空表单
        commentForm.value.content = ''
        ElMessage.success('评论提交成功')
        
      } catch (error) {
        console.error('评论提交失败:', error)
        ElMessage.error('评论提交失败，请重试')
      }
    }
    
    // 在组件 setup 函数中
    const instance = getCurrentInstance()
    const commentFormRef = ref(null)
    
    const validateCommentForm = () => {
      return new Promise((resolve, reject) => {
        if (commentFormRef.value) {
          commentFormRef.value.validate((valid) => {
            if (valid) {
              resolve()
            } else {
              reject(new Error('表单验证失败'))
            }
          })
        } else {
          reject(new Error('表单引用未找到'))
        }
      })
    }
    
    
    
    
    
    
    
    // 收藏商品点击处理方法
    const handleCollect = async () => {
      try {
        // 显示确认对话框
        await ElMessageBox.confirm(
          '确定要收藏该商品吗？', 
          '确认收藏', 
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
          }
        );
        
        // 用户确认后，执行收藏逻辑
        console.log('用户确认收藏，准备执行收藏操作');
        
        // 从本地获取用户ID（假设已登录）
        const accessToken = localStorage.getItem('accessToken');
        const userId = localStorage.getItem('userId');
        const goodsId = localStorage.getItem('goodsId');
        if (!accessToken) {
          ElMessage.error('请先登录');
          router.push('/');
          return;
        }
        
        // 调用API进行收藏操作，假设存在 collectGoodsApi 方法
        const response = await getGoods.collectGoodsApi({
          goodsId: Number(goodsId),
          userId: Number(userId)
        });
        
        // 处理收藏结果
    
          ElMessage.success('收藏成功');
          router.push('/product');
      } catch (error) {
        // 处理取消或错误
        if (error instanceof Error) {
          console.log('用户取消收藏');
        } else {
          console.error('收藏过程中发生错误:', error);
          ElMessage.error('收藏失败，请重试');
        }
      }
    };
    const handleBuyNow = async () => {
      try {
        // 1. 显示确认对话框
        await ElMessageBox.confirm(
          '确定要立即购买该商品吗？', 
          '确认购买', 
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        );
        
        // 2. 用户确认后，执行购买逻辑
        console.log('用户确认购买，准备创建订单');
        
        // 3. 从本地获取用户ID（假设已登录）
        const accessToken = localStorage.getItem('accessToken');
        const userId = localStorage.getItem('userId');
        const goodsId = localStorage.getItem('goodsId');
        if (!accessToken) {
          ElMessage.error('请先登录');
          router.push('/');
          return;
        }
    
    
        const response2 = await getUsers.dchargeApi({
          id: userId,              
          amount: price.value 
        });
      
        // 5. 调用API创建订单
        const response = await getGoods.orderGoodsApi({
          goodsId: goodsId,
          userId: Number(userId),
          price: Number(price.value)
        });
        
        // 6. 处理订单创建结果
     
          const orderId = response.data.data;
          ElMessage.success('订单创建成功');
          
          // 7. 跳转到支付页面，携带订单ID
          router.push("/product");
        
      } catch (error) {
        // 处理取消或错误
        if (error instanceof Error) {
          console.log('用户取消购买');
        } else {
          console.error('购买过程中发生错误:', error);
          ElMessage.error('购买失败，请重试');
        }
      }
    };
    const getGoodsa = async () => {
      if (goodsId.value) { // 检查是否有值
        try {
          const response = await getGoods.getGoodsByIdApi({
            goodsId: Number(goodsId.value) // 使用响应式变量
          });
          introduct.value = response.data.data.introduction; // 存储商品介绍
          goodsName.value = response.data.data.goodsName; // 存储商品名称  
          currentImage.value = response.data.data.coverImage; // 存储商品名称  
              price.value = response.data.data.price; // 存储价格
          console.log('ok', response);
        } catch (error) {
          console.error('失败:', error);
        }
      }
    };
        const currentImageIndex = ref(0)
      
        
    
        
        const selectImage = (index) => {
          currentImageIndex.value = index
          currentImage.value = images[index]
        }
        
        const detailImages = [
          'https://tse1-mm.cn.bing.net/th/id/OIP-C.cBzDSOfftTq2_4LB4IyVEwHaFj?w=188&h=141&c=7&r=0&o=5&dpr=1.4&pid=1.7',  // 详细展示图1
          'https://tse1-mm.cn.bing.net/th/id/OIP-C.cBzDSOfftTq2_4LB4IyVEwHaFj?w=188&h=141&c=7&r=0&o=5&dpr=1.4&pid=1.7',  // 详细展示图2
          'https://tse1-mm.cn.bing.net/th/id/OIP-C.cBzDSOfftTq2_4LB4IyVEwHaFj?w=188&h=141&c=7&r=0&o=5&dpr=1.4&pid=1.7'   // 详细展示图3
        ]
        
        // 添加标签页状态管理
        const tabs = [
        
        { name: '商品详情' },
        { name: '交易须知' },
        { name: '买家评价(12)' }
        ]
        const currentTab = ref(0)
        
      
        
        // 评论分类统计
        const reviewStats = {
        total: 12,
        good: 10,
        medium: 1,
        bad: 1,
        averageRating: 4.8
        }
        
        // 当前选中的评论类型
        const currentReviewType = ref('all')
        
        // 切换评论类型
        const switchReviewType = (type) => {
        currentReviewType.value = type
        }
        </script>
        
        <style scoped>
        .product-detail {
          max-width: 1200px;
          margin: 0 auto;
          padding: 24px;
        }
        
        .breadcrumb {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #666;
          margin-bottom: 24px;
        }
        
        .detail-container {
          display: flex;
          gap: 40px;
          margin-bottom: 40px;
        }
        
        /* 左侧图片区域 */
        .product-gallery {
          width: 500px;
          flex-shrink: 0;
        }
        
        .main-image-wrapper {
          position: relative;
          border-radius: 12px;
          overflow: hidden;
          margin-bottom: 16px;
        }
        
        .main-image {
          width: 100%;
          height: 500px;
          object-fit: cover;
        }
        .review-form {
      background: #f8fafc;
      padding: 24px;
      border-radius: 12px;
      margin-bottom: 32px;
    }
    
    .el-form-item__label {
      width: auto;
      margin-right: 16px;
      font-weight: 500;
      color: #3b82f6;
    }
    
    .el-textarea__inner {
      border-radius: 8px;
      resize: none;
    }
    
    .comment-form .el-button {
      width: 120px;
      margin-left: auto;
      display: block;
    }
        .image-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 12px;
          background: rgba(0, 0, 0, 0.5);
          color: white;
          font-size: 14px;
        }
        
        .thumbnail-list {
          display: flex;
          gap: 12px;
        }
        
        .thumbnail-item {
          width: 80px;
          height: 80px;
          border-radius: 8px;
          overflow: hidden;
          cursor: pointer;
          border: 2px solid transparent;
          transition: all 0.3s ease;
        }
        
        .thumbnail-item.active {
          border-color: #3b82f6;
        }
        
        .thumbnail-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        /* 右侧信息区域 */
        .product-info {
          flex: 1;
        }
        
        .product-header {
          margin-bottom: 24px;
        }
        
        .tags {
          margin-bottom: 16px;
        }
        
        .tag {
          padding: 4px 12px;
          border-radius: 4px;
          font-size: 14px;
          margin-right: 8px;
        }
        
        .tag.quality {
          background: #ecfdf5;
          color: #059669;
        }
        
        .tag.authentic {
          background: #eff6ff;
          color: #3b82f6;
        }
        
        .title {
          font-size: 24px;
          color: #1f2937;
          margin-bottom: 8px;
        }
        
        .subtitle {
          color: #666;
          font-size: 16px;
        }
        
        .price-section {
          background: #f8fafc;
          padding: 20px;
          border-radius: 12px;
          margin-bottom: 24px;
        }
        
        .price-row {
          display: flex;
          align-items: baseline;
          gap: 12px;
          margin-bottom: 12px;
        }
        
        .current-price {
          font-size: 32px;
          color: #ef4444;
          font-weight: bold;
        }
        
        .original-price {
          color: #666;
          text-decoration: line-through;
        }
        
        .discount {
          background: #fef2f2;
          color: #ef4444;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 14px;
        }
        
        .price-tips {
          color: #666;
          font-size: 14px;
        }
        
        .detail-section {
          margin-bottom: 24px;
        }
        
        .detail-row {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
        }
        
        .label {
          width: 100px;
          color: #666;
        }
        
        .condition-bar {
          width: 200px;
          height: 8px;
          background: #e5e7eb;
          border-radius: 4px;
          margin-right: 12px;
        }
        
        .condition-progress {
          height: 100%;
          background: #3b82f6;
          border-radius: 4px;
        }
        
        .seller-section {
          background: #fff;
          border-radius: 12px;
          padding: 20px;
          margin-bottom: 24px;
          border: 1px solid #e5e7eb;
        }
        
        .seller-info {
          display: flex;
          align-items: center;
          gap: 16px;
        }
        
        .seller-avatar {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
        
        .seller-detail {
          flex: 1;
        }
        
        .seller-name {
          font-size: 18px;
          margin-bottom: 4px;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        
        .seller-badge {
          background: #fef3c7;
          color: #d97706;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
        }
        
        .seller-stats {
          display: flex;
          gap: 24px;
        }
        
        .stat-item {
          text-align: center;
        }
        
        .stat-item .num {
          color: #3b82f6;
          font-weight: bold;
          display: block;
        }
        
        .stat-item .text {
          color: #666;
          font-size: 14px;
        }
        
        .action-section {
          display: flex;
          gap: 16px;
        }
        
        .btn {
          padding: 12px 24px;
          border-radius: 8px;
          font-size: 16px;
          display: flex;
          align-items: center;
          gap: 8px;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .btn.primary {
          background: #3b82f6;
          color: white;
          border: none;
        }
        
        .btn.primary:hover {
          background: #2563eb;
        }
        
        .btn.secondary {
          background: white;
          border: 1px solid #3b82f6;
          color: #3b82f6;
        }
        
        .btn.secondary:hover {
          background: #eff6ff;
        }
        
        .btn.report {
          background: white;
          border: 1px solid #e5e7eb;
          color: #666;
        }
        
        .btn.report:hover {
          background: #f8fafc;
        }
        
        /* 详情标签页 */
        .product-detail-tabs {
          background: white;
          border-radius: 12px;
          margin-top: 40px;
        }
        
        .tab-header {
          display: flex;
          border-bottom: 1px solid #e5e7eb;
        }
        
        .tab {
          padding: 16px 32px;
          cursor: pointer;
          color: #666;
          border-bottom: 2px solid transparent;
        }
        
        .tab.active {
          color: #3b82f6;
          border-bottom-color: #3b82f6;
        }
        
        .tab-content {
          padding: 32px;
        }
        
        .spec-list {
          margin-bottom: 32px;
        }
        
        .spec-item {
          display: flex;
          padding: 12px 0;
          border-bottom: 1px solid #e5e7eb;
        }
        
        .spec-label {
          width: 120px;
          color: #666;
        }
        
        .condition-description {
          margin-bottom: 32px;
          line-height: 1.8;
        }
        
        .detail-images {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
        }
        
        .detail-images img {
          width: 100%;
          border-radius: 8px;
        }
        
        h3 {
          margin-bottom: 16px;
          color: #1f2937;
        }
        
        /* 交易须知样式 */
        .process-steps {
          display: flex;
          gap: 40px;
          margin-top: 24px;
        }
        
        .step {
          display: flex;
          align-items: flex-start;
          gap: 16px;
        }
        
        .step-icon {
          width: 32px;
          height: 32px;
          background: #3b82f6;
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
        }
        
        .step-info h4 {
          margin-bottom: 8px;
          color: #1f2937;
        }
        
        .step-info p {
          color: #666;
          font-size: 14px;
        }
        
        .guarantee-list {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
          margin-top: 24px;
        }
        
        .guarantee-item {
          text-align: center;
          padding: 24px;
          background: #f8fafc;
          border-radius: 12px;
        }
        
        .guarantee-item i {
          font-size: 32px;
          color: #3b82f6;
          margin-bottom: 16px;
        }
        
        .guarantee-item h4 {
          margin-bottom: 8px;
          color: #1f2937;
        }
        
        .guarantee-item p {
          color: #666;
          font-size: 14px;
        }
        
        /* 买家评价样式 */
        .reviews-header {
          margin-bottom: 32px;
        }
        
        .rating-overview {
          text-align: center;
          margin-bottom: 24px;
        }
        
        .rating-score {
          font-size: 48px;
          color: #1f2937;
          font-weight: bold;
        }
        
        .max-score {
          font-size: 24px;
          color: #666;
        }
        
        .rating-stars {
          color: #f59e0b;
          font-size: 24px;
          margin: 8px 0;
        }
        
        .rating-count {
          color: #666;
        }
        
        .rating-tags {
          display: flex;
          gap: 12px;
          margin-bottom: 24px;
        }
        
        .rating-tags .tag {
          padding: 6px 16px;
          border-radius: 20px;
          background: #f3f4f6;
          color: #666;
          cursor: pointer;
        }
        
        .rating-tags .tag.active {
          background: #3b82f6;
          color: white;
        }
        
        .review-item {
          padding: 24px 0;
          border-bottom: 1px solid #e5e7eb;
        }
        
        .reviewer-info {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 16px;
        }
        
        .reviewer-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        
        .reviewer-name {
          color: #1f2937;
          font-weight: 500;
        }
        
        .review-stars {
          color: #f59e0b;
        }
        
        .review-text {
          color: #1f2937;
          line-height: 1.6;
          margin-bottom: 16px;
        }
        
        .review-images {
          display: flex;
          gap: 8px;
          margin-bottom: 16px;
        }
        
        .review-images img {
          width: 100px;
          height: 100px;
          border-radius: 8px;
          object-fit: cover;
        }
        
        .review-meta {
          display: flex;
          gap: 16px;
          color: #666;
          font-size: 14px;
        }
        
        .notice-section {
          margin-bottom: 40px;
        }
        </style>